<script lang="ts">
import { defineComponent, ref, reactive, watch, computed, watchEffect, onUnmounted } from "vue"
import { useI18n } from "vue-i18n";
import { UserModule } from "@/store/modules/user";
import { showToast, showDialog, showConfirmDialog } from 'vant';
import { getAssetsFile } from "@/utils/pub-use";
import { formatAddress, toStringMatch } from "@/utils/format"
import { getUserInfo, getDirectList } from "@/api";
import setDirectRate from "@/components/setDirectRate.vue";
import Clipboard from "clipboard";

export default defineComponent({
    components: { setDirectRate },
    setup() {
        const { t } = useI18n();
        const pageLoading = ref(true)
        const userInfo = ref({})
        const setatTeam = reactive({
            pageNum: 1,
            pageSize: 10,
            total: 0
        });
        const setatTeam2 = reactive({
            pageNum: 1,
            pageSize: 10,
            total: 0
        });
        const directList = ref([])
        const loadTeam = async () => {
            try {
                const res = await getDirectList({
                    pageNum: setatTeam.pageNum - 1,
                    pageSize: setatTeam.pageSize,
                });
                if (res.data.code != 20) return;
                setatTeam.total = res.data.data.Total
                directList.value = res.data.data.DirectList || []
            } catch (error) {
                directList.value = []
            }
        }
        const directList2 = ref([])
        const loadTeam2 = async () => {
            try {
                const res = await getDirectList({
                    pageNum: setatTeam2.pageNum - 1,
                    pageSize: setatTeam2.pageSize,
                });
                if (res.data.code != 20) return;
                setatTeam2.total = res.data.data.Total
                directList2.value = res.data.data.DirectList || []
            } catch (error) {
                directList2.value = []
            }
        }
        const loadData = async () => {
            pageLoading.value = true
            const res = await getUserInfo()
            userInfo.value = res.data.data.UserInfo || {}
            loadTeam()
            loadTeam2()
            pageLoading.value = false
        }
        const copy = async (id: string) => {
            const clipboard = new Clipboard(id);
            clipboard.on("success", () => {
                showToast(t("layout.success"));
                clipboard.destroy();
            });
            clipboard.on("error", () => {
                showToast(t("layout.fail"));
                clipboard.destroy();
            });
        };
        const timer = ref();
        watchEffect(() => {
            timer.value = setInterval(async () => {
                userInfo.value = (await getUserInfo()).data.data.UserInfo || {}
            }, 1500);
        });
        onUnmounted(() => {
            clearInterval(timer.value);
        });
        watch(
            () => UserModule.userAddr,
            (newUserAddr: string) => {
                if (newUserAddr) {
                    loadData();
                }
            },
            { immediate: true }
        );
        return {
            setatTeam,
            loadTeam,
            userInfo,
            pageLoading,
            directList,
            formatAddress,
            directList2,
            loadTeam2,
            setatTeam2,
            UserModule,
            toStringMatch,
            copy
        }
    }
})
</script>

<template>
    <div class="page">
        <div class="balanceList">
            <div class="row">
                <div class="cell">
                    <div class="label">USDT</div>
                    <div class="value">{{ userInfo.USDT || 0 }}</div>
                </div>
                <div class="cell">
                    <div class="label">USDH</div>
                    <div class="value">{{ userInfo.USDH || 0 }}</div>
                </div>
                <div class="cell">
                    <div class="label">USDF</div>
                    <div class="value">{{ userInfo.USDF || 0 }}</div>
                </div>
                <div class="cell">
                    <div class="label">HF</div>
                    <div class="value">{{ userInfo.HF || 0 }}</div>
                </div>
                <div class="cell">
                    <div class="label">{{ $t('layout.Contribution') }}</div>
                    <div class="value">{{ userInfo.NFTV || 0 }}</div>
                </div>
            </div>
            <div class="to">
                <router-link to="/rechargeCoins">{{ $t('layout.topup') }}</router-link>
                <router-link to="/withdrawCoins">{{ $t('layout.Withdrawcoins') }}</router-link>
                <router-link to="/transfer">{{ $t('layout.transfer') }}</router-link>
            </div>
            <div class="logs">
                <router-link to="/getInvestList">
                    <img src="@/assets/image/image6.png">
                    {{ $t('layout.Orderrecord') }}
                </router-link>
                <router-link to="/earningsRecord"><img src="@/assets/image/image6.png">{{ $t('layout.Earningsrecord')
                }}</router-link>
            </div>
        </div>
        <div class="TeamPerformance">
            <div class="title">{{ $t('layout.myperformance') }}</div>
            <div class="direct">
                <div class="userAddr-box">{{ $t('layout.invitationlink') }}：{{ formatAddress(UserModule.userAddr, 10) }}
                    <img src="@/assets/image/cp.png" @click="copy('.userAddr')" class="userAddr"
                        :data-clipboard-text="UserModule.userAddr">
                </div>
                <div class="total">
                    <div class="cell">
                        <div class="label">{{ $t('layout.Numberofteamaddresses') }}</div>
                        <div class="value">{{ userInfo.DownlineCount || 0 }}</div>
                    </div>
                    <div class="cell">
                        <div class="label">{{ $t('layout.Totalteamcontribution') }}</div>
                        <div class="value">{{ (userInfo.DownlineInvest1 + userInfo.DownlineInvest2 +
                            userInfo.DownlineInvest3) || 0
                        }}</div>
                    </div>
                </div>
                <div class="list">
                    <ul>
                        <li>
                            <span>{{ $t('layout.Directpushaddress') }}</span>
                            <span>{{ $t('layout.personalcontribution') }}</span>
                            <span>{{ $t('layout.Teamcontribution') }}</span>
                        </li>
                        <li v-for="(item, index) in directList" :key="index">
                            <span>{{ formatAddress(item.Address) }}</span>
                            <span>{{ toStringMatch(item.TotalInvest1, 0) }} {{ toStringMatch(item.TotalInvest2, 0) }} {{
                                toStringMatch(item.TotalInvest3, 0)
                            }}</span>
                            <span>{{ toStringMatch(item.DownlineInvest1, 0) }} {{ toStringMatch(item.DownlineInvest2, 0) }}
                                {{ toStringMatch(item.DownlineInvest3, 0) }}</span>
                        </li>
                    </ul>
                    <van-pagination v-model="setatTeam.pageNum" :total-items="setatTeam.total" :show-page-size="5"
                        :items-per-page="setatTeam.pageSize" force-ellipses @change="loadTeam" />
                </div>
            </div>
        </div>
        <div class="TeamPerformance">
            <div class="title">{{ $t('layout.Myteamsettings') }}</div>
            <div class="direct">
                <div class="rate"><span>{{ $t('layout.myRatio') }}：</span><span>{{ userInfo.Rate1 }}</span><span>{{
                    userInfo.Rate2
                }}</span><span>{{
    userInfo.Rate3 }}</span><span></span></div>
                <div class="list list2 ">
                    <ul>
                        <li>
                            <span>{{ $t('layout.Directpushaddress') }}</span>
                            <span>{{ $t('layout.preliminaries') }}</span>
                            <span>{{ $t('layout.semifinals') }}</span>
                            <span>{{ $t('layout.finals') }}</span>
                            <span>{{ $t('layout.setup') }}</span>
                        </li>
                        <li v-for="(item, index) in directList2" :key="index">
                            <span>{{ formatAddress(item.Address) }}</span>
                            <span>{{ item.Rate1 }}</span>
                            <span>{{ item.Rate2 }}</span>
                            <span>{{ item.Rate3 }}</span>
                            <span @click="$refs.directRefs.show(item)">{{ $t('layout.Revise') }}</span>
                        </li>
                    </ul>
                    <van-pagination v-model="setatTeam2.pageNum" :total-items="setatTeam2.total" :show-page-size="5"
                        :items-per-page="setatTeam2.pageSize" force-ellipses @change="loadTeam2" />
                </div>
            </div>
        </div>
    </div>
    <set-direct-rate ref="directRefs" @load="loadTeam2" />
</template>

<style lang="less" scoped>
.page {
    padding: 0 15px 15px 15px;

    .balanceList {
        padding: 15px;
        background: rgba(11, 166, 98, 0.05);
        border-radius: 6px;
        border: 1px solid #FFFFFF;

        .row {

            .cell {
                margin-bottom: 8px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                height: 45px;
                padding: 0 15px;
                background: #FFFFFF;
                border-radius: 6px;

                .value {
                    font-size: 15px;
                    font-weight: bold;
                    color: #0BA662;
                    letter-spacing: 1px;
                }
            }

        }

        .to {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;

            a {
                width: 99px;
                height: 40px;
                display: flex;
                text-align: center;
                align-items: center;
                justify-content: center;
                font-size: 15px;
                font-weight: 500;
                color: #FFFFFF;
                background: #0BA662;
                box-shadow: 0px 0 10px 0px rgba(128, 48, 36, 0.1);
                border-radius: 20px;
            }
        }

        .logs {
            margin-top: 15px;
            display: flex;
            justify-content: space-between;

            a {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 153px;
                height: 40px;
                font-size: 15px;
                font-weight: 500;
                color: #0BA662;
                background: #FFFFFF;
                border-radius: 20px;
                border: 1px solid #0BA662;

                img {
                    margin-right: 8px;
                    height: 15px;
                }
            }
        }
    }

    .TeamPerformance {
        margin-top: 20px;

        .title {
            font-size: 16px;
            font-weight: bold;
        }

        .rate {
            padding: 15px;
            background: rgba(11, 166, 98, 0.05);
            border-radius: 6px;
            border: 1px solid #FFFFFF;
            display: flex;
            justify-content: space-between;

            span {
                font-weight: bold;
                flex: 1;
                text-align: center;

                &:first-child {
                    flex: 30% 0 0;
                    text-align: left;
                }
            }
        }

        .userAddr-box {
            margin-bottom: 10px;
            padding: 15px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            background: rgba(11, 166, 98, 0.05);
            border-radius: 6px;
            border: 1px solid #FFFFFF;

            img {
                width: 15px;
                margin-left: 5px;
            }
        }

        .direct {
            margin-top: 12px;
            padding: 20px 15px;
            background: rgba(11, 166, 98, 0.05);
            border-radius: 6px;
            border: 1px solid #FFFFFF;

            .total {
                display: flex;
                justify-content: space-between;

                .cell {
                    width: 152px;
                    height: 82px;
                    text-align: center;
                    background: rgba(11, 166, 98, 0.05);
                    border-radius: 6px;
                    border: 1px solid #FFFFFF;

                    .label {
                        color: #1F2120;
                        padding-top: 19px;
                    }

                    .value {
                        margin-top: 10px;
                        font-size: 25px;
                        font-weight: bold;
                        color: #1F2120;
                    }
                }
            }

            .list {
                margin-top: 12px;

                ul {
                    li {
                        margin-bottom: 4px;
                        display: flex;
                        text-align: center;
                        font-size: 12px;
                        color: #1F2120;
                        padding: 15px 0;
                        background: #FFFFFF;
                        border-radius: 6px;

                        span {
                            flex: 1;

                            &:first-child {
                                flex: 30% 0 0;
                            }

                            // &:last-child {
                            //     text-align: right;
                            // }
                        }

                        &:first-child {
                            background: rgba(11, 166, 98, 0.05);
                            border: 1px solid #FFFFFF;
                        }
                    }
                }
            }

            .list2 {
                ul {
                    li {
                        padding: 15px;

                        span {
                            flex: 1;

                            &:first-child {
                                flex: 80px 0 0;
                                text-align: left;
                            }

                            &:last-child {
                                color: #0BA662;
                                text-align: right;
                                font-weight: bold;
                            }
                        }

                        &:first-child {
                            span {
                                &:last-child {
                                    color: #1F2120;
                                    font-weight: 400;
                                }
                            }

                        }

                    }
                }
            }
        }
    }
}
</style>
